<template>
  <div class="box">
    <header class="header">
      <van-nav-bar 
      id="van-nav-bar__content1" 
      title="标题" 
      left-text="返回" 
      left-arrow
      @click-left="btleft"
      >
  <template #right>
    <div class="dl" style="color:white;font-size:15px" v-if="!loginState" @click="logins">登录</div>
    <van-icon name="location-o" color="white" size="20px" v-else @click="area"/>{{city}}
  </template>
    <template #title>
      <!-- <input type="text" class="iconfont icon-sousuo" > -->
      <div class="iconfont icon-sousuo dds">
        <input type="text" @click="seach">
      </div>
  </template>
      <template #left>
      <!-- <input type="text" class="iconfont icon-sousuo" > -->
        <van-icon name="wap-nav" size="30" color="white"/>
  </template>
</van-nav-bar>
    </header>
    <div class="content">

      <van-pull-refresh 
      v-model="isLoading"
       success-text="刷新成功"
       @refresh="onRefresh">

      <!-- 轮播 -->

      <div class="va">
        <div class="vs"></div>
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <van-grid :column-num="5" icon-size="36px" :border="false">
        <van-grid-item
          v-for="value in grid"
          :key="value.id"
          :icon="value.url"
          :text="value.text"
        />
      </van-grid>

      <!-- 嗨购秒杀 -->
      <ul class="sekillTitle">
        <div >
        <li class="acv">嗨购秒杀</li>
        <li class="acv">
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </li>
        </div>
        <li id="gdms">更多秒杀</li>
      </ul>
      <!-- 更多秒杀下面的商品列表 -->
      <!-- <ul>
        <li v-for="item in seckillList.data" :key="item.proid">
          <van-image width="55px" height="55px" :src="item.img1" />
          <p>￥{{ item.originprice }}</p>
        </li>
      </ul> -->

      <ul class="seckillTitle">
        <router-link
          tag="li"
          :to="{ path: '/detail/' + item.proid }"
          v-for="item in seckillList.data"
          :key="item.proid"
        >
          <van-image width="55px" height="55px" :src="item.img1" />
          <p>￥{{ item.originprice }}</p>
        </router-link>
      </ul>
      <!-- <div class="cass"></div> -->
      <!-- 下拉 -->
      <van-list
  v-model="loading"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
      >
       <ProList :proList="proList"/>
</van-list>
       </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { getSeckillList,getProList} from "@/utlis/home.js";
import ProList from "@/components/ProList.vue";

import { Lazyload } from "vant";
import { Swipe, SwipeItem } from "vant";
import { Grid, GridItem } from "vant";
import { CountDown } from "vant";
import { Icon } from "vant";
import { Image as VanImage } from "vant";
import { PullRefresh } from 'vant';
import { List } from 'vant';
import { NavBar } from 'vant';

Vue.use(Lazyload);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(CountDown);
Vue.use(VanImage);
Vue.use(Icon);
Vue.use(PullRefresh);
Vue.use(List);
Vue.use(NavBar);

export default {
  data() {
    return {
      images: [
        "https://imgcps.jd.com/ling4/10052544521712/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-60b4acacfe543e8ec85e6188/99e51d4a/cr_1125x449_0_166/s/q70.jpg",
        "https://m15.360buyimg.com/mobilecms/jfs/t1/125529/29/28975/65284/62cf5cebE2585be6c/13ef94e8fbc41621.jpg!cr_1125x449_0_166!q70.jpg",
        "https://m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/66479/13/21399/65518/62e271dfE4dc4181f/2d7c014f2d37b45b.jpg!cr_1053x420_4_0!q70.jpg",
        "https://m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/77794/2/19408/128102/62e27222E6cfb9aa8/a467d16fbd54ff8a.jpg!cr_1053x420_4_0!q70.jpg",
        "https://m15.360buyimg.com/mobilecms/s1062x420_jfs/t1/212225/6/11238/61871/61e50ff9E7f02c060/8d0f3065b0c27182.jpg!cr_1053x420_4_0!q70.jpg",
      ],
      grid: [
        {
          id: "001",
          url: "https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg",
          text: "京东超市",
        },
        {
          id: "002",
          url: "https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png!q70.jpg",
          text: "数码电气",
        },
        {
          id: "003",
          url: "https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png!q70.jpg",
          text: "新百货",
        },
        {
          id: "004",
          url: "https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png!q70.jpg",
          text: "京东生鲜",
        },
        {
          id: "005",
          url: "https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png!q70.jpg",
          text: "京东到家",
        },
        {
          id: "006",
          url: "https://m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png!q70.jpg",
          text: "充值缴费",
        },
        {
          id: "007",
          url: "https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png!q70.jpg",
          text: "附近好店",
        },
        {
          id: "008",
          url: "https://m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png!q70.jpg",
          text: "领券",
        },
        {
          id: "009",
          url: "https://m15.360buyimg.com/mobilecms/jfs/t1/196711/35/12751/6996/60ec1000E21b5bab4/38077313cb9eac4b.png!q70.jpg",
          text: "领津贴",
        },
        {
          id: "010",
          url: "https://m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png!q70.jpg",
          text: "Plus会员",
        },
      ],
      time: 30 * 60 * 60 * 1000,
      seckillList: [],
      count: 0,
      isLoading: false,
      proList:[],
      loading: false,
      finished: false,
      count:2,
      city:""
    };
  },
  components:{
    ProList
  },
  computed:{
    loginState(){
      console.log(this.$store.state.loginState,1);
      return this.$store.state.loginState
      }
  }
  ,
  methods:{
    
        onRefresh() {

            getSeckillList().then((res) => {
      // console.log(res.data);
      this.seckillList = res.data;
      getProList().then((res) => {
      console.log(res.data.data);
      this.proList = res.data.data;
              this.isLoading = false;
                this.count = 2;
        this.finished = false;
    });
    });


    },

        onLoad() {
           this.loading = true;
      getProList({ count: this.count }).then((res) => {
        // 请求结束
        this.loading = false;

        if (res.data.data.length == 0) {
          // 没有数据
          this.finished = true;
        } else {
          this.proList = [...this.proList,...res.data.data];
          console.log(this.proList);
          this.count++;
          // }, 2000);
}})
    },
    btleft(){
      this.$router.push("/kind")
    },
    logins(){
 this.$router.push("/login")
    },
    area(){
      this.$router.push("/city")
    },
        seach(){
      this.$router.push("/seach")
    }
  }
  ,
  mounted() {
    console.log(this);
    getSeckillList().then((res) => {
      // console.log(res.data);
      this.seckillList = res.data;
    });
      getProList().then((res) => {
      console.log(res.data.data);
      this.proList = res.data.data;
    });
    if(this.$store.state.citymap!=""){
    this.city=this.$store.state.citymap[2].name
    }

    
  },

  
};
</script>

<style lang="stylus" scoped>
// .cass{
//   background-color: red
//   width 100%
//   height 5000px
// }
.va {
  width: 90%;
  background-color: #39a9ed;
  margin: 0 auto;
  height: 37vw;
  overflow: hidden;
  position: relative;
  border-radius: 10px;
}

.van-swipe {
  height: 37vw;
}

.vs {
  background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    from(#f1503b),
    color-stop(50%, #c82519)
  );
  background-image: -webkit-linear-gradient(bottom, #f1503b, #c82519 50%);
  background-image: linear-gradient(0deg, #f1503b, #c82519 50%);
  position: absolute;
  top: 0;
  left: -25%;
  height: 40vw;
  width: 125%;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}

img {
  height: 100%;
  width: 100%;
}

.van-grid-item .van-grid-item__content {
  background-color: #f6f6f6;
}

.sekillTitle {
  display: flex;
  height: 0.4rem;
  background-color: #fff;
  justify-content: space-between
  align-items: center
  .acv{
  float left


}
  #gdms{
    margin-left 1.3rem
  }
.seckillList {
  display: flex;
  width 100%

}

  li {
    flex: 1;
    height: 0.7rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


    .van-image {
      img {
        width: 0.55rem;
        height: 0.55rem;
      }
    }

    p {
      color: #f66;
    }
  }
}


.colon { 
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}

.block { 
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #f66;
}

.seckillTitle {
  display: flex;
  height: 0.9rem;
  overflow: auto;
  width: 100%;

  li {
    text-align: left;
    color: #f66;
    font-size: 12px;
    font-weight: bold;
    margin: 0 10px;

    &:nth-child(1) {
      // width 60px
      margin-left: 10px;
    }

    &:nth-child(3) {
      // width 120px
      // text-align right
      margin-right: 10px;

      .van-icon {
        transform: rotate(225deg);
      }
    }

    &:nth-child(2) {
      flex: 1;
    }
  }
}

.backTop {
  position: fixed;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #cccccc;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 100px;
  right: 10px;
}
#van-nav-bar__content1{
  background-color: #e43130;
}
.dds{
  width 200px
  height 32px
  background-color: white
  border-radius: 20px
  input{
    margin-top 1vw
    outline: none
    border: 0
  }
  
}
</style>
